import { Modal, Form, Input } from 'antd';
import * as React from 'react';

class ServiceTagAddModalForm extends React.Component {
  render() {
    const inputProps = this.props.form.getFieldProps('tags', {});

    return (
      <Form horizontal>
        <Form.Item labelCol={{ span: 6 }} wrapperCol={{ span: 14 }}
          label="标签：" help="一次添加多个可以,隔开">
          <Input {...inputProps} placeholder="输入新标签"/>
        </Form.Item>
      </Form>
    )
  }
}

ServiceTagAddModalForm = Form.create({})(ServiceTagAddModalForm);

class ServiceTagAddModal extends React.Component {
  constructor(props) {
    super(props);
    this.state = { visible: false }
  }

  showModal() {
    this.setState({
      visible: true
    });
  }

  handleOk() {
    const form = this.refs.form;
    const service = this.props.service;
    var tagStr = form.getFieldValue("tags") || "";
    const tags = tagStr.split(",");
    if (service.tags && service.tags.length > 0)
      tags.push(service.tags);
    tagStr = tags.join(",");
    this.setState({
      confirmLoading: true
    });

    this.props.onSave(service.id, tagStr)
      .then(()=> {
        this.setState({
          visible: false,
          confirmLoading: false
        });
      });
  }

  handleCancel() {
    this.setState({
      visible: false
    });
  }

  render() {
    return (
      <Modal title="增加标签"
        visible={this.state.visible}
        onOk={::this.handleOk}
        confirmLoading={this.state.confirmLoading}
        onCancel={::this.handleCancel}>
        <ServiceTagAddModalForm ref="form"/>
      </Modal>
    );
  }
}

export default ServiceTagAddModal;
